import Taro from "@tarojs/taro";
import { Navigator, Picker } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByIcon from "@/components/ui/ByIcon";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import ByButton from "@/components/ui/ByButton";
import FormInput from "@/components/common/FormInput";
import PageHeader from "@/components/common/PageHeader";

import useForm from "@/hooks/useForm";
import useAppStore from "@/store";
import ApiCrm from "@/api/crm";

const rangeSource = ["业务部邀约", "工程回单"];
const rangeGender = ["男", "女"];

const cellProps = {
  labelWidth: "5em",
  requierd: true,
};

export default () => {
  const userInfo = useAppStore((state) => state.userInfo);

  const { loading, model, setModel, submit } = useForm<{
    customerName: string;
    sex: "男" | "女";
    customerSource: string;
    customerType: string;
    mobileTelephone: string;
    salesmanId: number;
    salesman: string;
    area: number | "";
    decorationAddress: string;
    decorationArea: string;
    decorationCity: string;
    estate: string;
    remark: string;
  }>(ApiCrm.createCustomer, {
    defaultModel: {
      area: "",
      salesman: userInfo?.user_name,
      salesmanId: userInfo?.user_id,
    },

    rules: {
      customerName: { required: true, message: "请输入客户姓名" },
      mobileTelephone: { required: true, message: "请输入客户联系电话" },
      sex: { required: true, message: "请选择客户性别" },
      customerType: { required: true, message: "请选择客户类类型" },
      decorationAddress: { required: true, message: "请输入装修地址" },
      decorationArea: { required: true, message: "请输入装修区域" },
      decorationCity: { required: true, message: "请输入装修城市" },
      estate: { required: true, message: "请输入装修小区" },
      area: { required: true, message: "请输入装修面积" },
    },
    onSuccess() {
      Taro.showToast({ title: "提交成功" });
      setTimeout(() => {
        Taro.navigateBack({ delta: 1 });
      }, 1500);
    },
  });

  return (
    <Page
      slotHeader={
        <PageHeader
          title="回单报备"
          slotRight={
            <Navigator url="list">
              <ByIcon name="Clock" size={42} />
            </Navigator>
          }
        />
      }
      slotFooter={
        <ByButton
          size="large"
          loading={loading}
          className="w-2/3"
          onClick={() => submit()}
        >
          提交
        </ByButton>
      }
    >
      <Card className="m-3">
        <ByCell label="客户名称" {...cellProps}>
          <FormInput
            maxlength={20}
            showLimitWords
            value={model.customerName}
            placeholder="请输入"
            onChange={(e) => setModel({ customerName: e })}
          />
        </ByCell>

        <ByCell label="联系电话" {...cellProps}>
          <FormInput
            maxlength={11}
            showLimitWords
            value={model.mobileTelephone}
            placeholder="请输入"
            onChange={(e) => setModel({ mobileTelephone: e })}
          />
        </ByCell>

        <Picker
          range={rangeGender}
          onChange={(e) => setModel({ sex: rangeGender[e.detail.value] })}
        >
          <ByCell label="性别" {...cellProps}>
            <FormInput disabled value={model.sex} placeholder="请选择" />
          </ByCell>
        </Picker>

        <Picker
          range={rangeSource}
          onChange={(e) =>
            setModel({ customerSource: rangeSource[e.detail.value] })
          }
        >
          <ByCell label="客户来源" {...cellProps}>
            <FormInput
              disabled
              value={model.customerSource}
              placeholder="请选择"
            />
          </ByCell>
        </Picker>

        <ByCell label="客户类型" {...cellProps}>
          <FormInput
            maxlength={20}
            showLimitWords
            value={model.customerType}
            placeholder="请输入"
            onChange={(e) => setModel({ customerType: e })}
          />
        </ByCell>

        <ByCell label="销售人员" {...cellProps}>
          <FormInput disabled value={model.salesman} />
        </ByCell>

        <ByCell label="装修区域" {...cellProps}>
          <FormInput
            maxlength={20}
            showLimitWords
            value={model.decorationArea}
            placeholder="请输入"
            onChange={(e) => setModel({ decorationArea: e })}
          />
        </ByCell>

        <ByCell label="装修城市" {...cellProps}>
          <FormInput
            maxlength={20}
            showLimitWords
            value={model.decorationCity}
            placeholder="请输入"
            onChange={(e) => setModel({ decorationCity: e })}
          />
        </ByCell>

        <ByCell label="装修小区" {...cellProps}>
          <FormInput
            maxlength={20}
            showLimitWords
            value={model.estate}
            placeholder="请输入"
            onChange={(e) => setModel({ estate: e })}
          />
        </ByCell>

        <ByCell label="装修地址" {...cellProps}>
          <FormInput
            maxlength={30}
            showLimitWords
            value={model.decorationAddress}
            placeholder="请输入"
            onChange={(e) => setModel({ decorationAddress: e })}
          />
        </ByCell>

        <ByCell label="区域面积" {...cellProps}>
          <FormInput
            type="number"
            value={model.area + ""}
            placeholder="请输入"
            onChange={(e) => setModel({ area: +e })}
          />
        </ByCell>

        <ByCell label="备注" vertical>
          <FormInput
            rows={5}
            type="textarea"
            maxlength={100}
            showLimitWords
            value={model.remark}
            placeholder="请输入"
            onChange={(e) => setModel({ remark: e })}
          />
        </ByCell>
      </Card>
    </Page>
  );
};
